<template>
	<div class="discoverDetail" :class="{backBlack:isBlack}" v-if='allData'>
		<div class="discoverDetailHeader">
			<div class="discoverDetailHeaderImg1" @click="goBack">
				<img src="../../assets/image/goBack.png" alt="" />
			</div>
			<div class="discoverDetailHeaderTitle">
				<p>用车知识</p>
			</div>
			<div class="discoverDetailHeaderImg2" @click="shareCollect">
				<img src="../../assets/image/discover/shareCollect.png" alt="" />
			</div>
			<div class="discoverShareCollect" v-show="isShow">
				<div class="discoverShare" @click="shareFriend">
					<img src="../../assets/image/discover/share2.png" alt="" />
					<p>分享</p>
				</div>
				<div class="discoverCollect" @click="changeCollect">
					<img v-if="!isCollect" src="../../assets/image/discover/collect.png" alt="" />
					<img v-if="isCollect" src="../../assets/image/discover/collected.png" alt="" />
					<p>收藏</p>
				</div>
			</div>
		</div>
		<toast v-model="ToastVisible">
			<p>收藏成功</p>
		</toast>
		<download @close-down='closeDowns' v-if='download'></download>
		<scroller class='myScroller' :on-infinite="infinite" ref="myScroller" :class='{myScrollerActive:download}'>
			<div class="discoverDetailBlank">
			</div>
			<div class="discoverDetailTitle">
				<p>{{allData.SUBJECT}}</p>
			</div>
			<div class="discoverDetailPlatform">
				<p>{{allData.SHOP_NAME}}</p>
				<p>{{allData.AUTHOR}}</p>
				<p>{{allData.CREATE_TIME|filterTimes}}</p>
			</div>
			<div class="discoverDetailContents" @click="changeColor">
				<div class="discoverDetailContent">
					<p v-html="allData.CONTENT" class="articsCon"></p>
				</div>
				<div class="discoverDetailContentsSum">
					<div class="discoverDetailContentsRead">
						<div class="discoverDetailContentsReadImg">
							<img src="../../assets/image/discover/reading.png" alt="" />
						</div>
						<div class="discoverDetailContentsReadSum">
							<p>阅读数 {{allData.CLICKS}}</p>
						</div>
					</div>
					<div class="discoverDetailcontentsLike">
						<div class="discoverDetailcontentsLikeImg" @click="changePraise(allData.ART_ID)">
							<img v-if="!isPraise" src="../../assets/image/discover/praise.png" alt="" />
							<img v-if="isPraise" src="../../assets/image/discover/praised.png" alt="" />
						</div>
						<div class="discoverDetailcontentsLikeSum">
							<p :class="{likeSumRed:isLikeSum}">{{likeSum}}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="relatedAd" v-if="allData.ADVCLASS==10007" @click='goShop(allData.ADVERTISEID)'>
				<div class="relatedAdImg">
					<img :src="allData.PROIMG" alt="" />
					<p></p>
				</div>
				<div class="relatedAdContent">
					<div class="relatedAdName">
						<p>{{allData.PRONAME}}</p>
					</div>
					<div class="relatedAdPrices">
						<div class="relatedAdOprice">
							<p>原价 ¥{{allData.PROORIGINALPRICE}}</p>
						</div>
						<div class="relatedAdprice">
							<p>现价 ¥<span>{{allData.PROPRICE}}</span></p>
						</div>
					</div>
				</div>
			</div>
			<div class="relatedAd2" v-if="allData.ADVCLASS==10027" @click='goAcive(allData.ACTURL)'>
				<div class="relatedAdImage2">
					<img :src="allData.ACTIMG" alt="" />
				</div>
				<div class="relatedAdDesc2">
					<p>{{allData.ACTNAME}}</p>
				</div>
			</div>
			<div class="relatedArticle">
				<div class="relatedArticleBlank">
				</div>
				<div class="relatedArticleTitle">
					<p>相关资讯</p>
				</div>
				<div class="relatedArticleLists" v-for="item in relatedData">
					<div class="relatedArticleList" @click="goRelatedArticle(item.ARTICLE_ID)">
						<div class="relatedArticleListL">
							<img :src="item.IMG_URL" alt="" />
						</div>
						<div class="relatedArticleListR">
							<div class="relatedArticleListTitle">
								<p>{{item.SUBJECT}}</p>
							</div>
							<div class="relatedArticleListDate">
								<p>{{item.CREATEDATE|filterTimes}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="comments">
				<div class="relatedComments" v-for="item in commentData">
					<div class="relatedCommentsImg">
						<img :src="item.HEADPHOTO" alt="" />
					</div>
					<div class="relatedCommentsCons">
						<p>{{item.USER_NAME}}</p>
						<p>{{item.CREATEDATE|filterTimes}}</p>
						<p>{{item.SCOMMENT}}</p>
					</div>
					<div class="relatedCommentsLike" @click="changePraise2(item.COMMENTARTICLE_ID)">
						<img v-if="item.LIKE_STATUS == 0" src="../../assets/image/discover/gray.png" alt="" />
						<img v-else src="../../assets/image/discover/red.png" alt="" />
						<p v-if="item.LIKE_STATUS == 0">{{item.ILIKENUM}}</p>
						<p v-else  class="activeR">{{item.ILIKENUM}}</p>
					</div>
				</div>
				<div class="noComment" v-if='commentData.length==0'>
					<img src="../../assets/image/carProduct/noComment.png" alt="" />
					<p>暂无评论</p>
				</div>
			</div>
		</scroller>
		<div class="discoverFootBlank">
		</div>
		<div class="writeComments" v-if="allData.length!=0">
			<div class="writeComment">
				<img src="../../assets/image/discover/write.png" alt="" />
				<input type="text" placeholder="写评论..." @click="writeComments" />
			</div>
			<div class="commentQuantity" @click='goComment'>
				<img src="../../assets/image/discover/news.png" alt="" />
				<p :class='{circle1:commentTotal<10,circle2:commentTotal<100&&commentTotal>=10,circle3:commentTotal<1000&&commentTotal>=100}'>{{commentTotal}}</p>
			</div>
			<div class="commentCollect" @click="changeCollect">
				<img v-if="!isCollect" src="../../assets/image/discover/collect.png" alt="" />
				<img v-if="isCollect" src="../../assets/image/discover/collected.png" alt="" />
			</div>
			<div class="commentShare" @click="shareFriend">
				<img src="../../assets/image/discover/share.png" alt="" />
			</div>
		</div>
		<!--<div class="writeComments" v-if="commentData.length==0">
			<p>暂无评论</p>
		</div>-->
		<div class="discoverPopup">
			<popup v-model="isComment" position="bottom">
				<div class="allComment">
					<div class="popupText">
						<p @click="cancelComment">取消</p>
						<p>写评论</p>
						<p @click="sendComment">发送</p>
					</div>
					<textarea v-model="commentContent" @click="textarea" autofocus>					
					</textarea>
				</div>
			</popup>
		</div>
		<toast v-model="ToastVisible2">
			<p>发布成功</p>
		</toast>
		<!--确认框-->
		<confirm v-model="confirmVisible" title="提示" @on-confirm="goLogin">
			<p style="text-align:center;">您当前尚未登录，现在前往登录？</p>
		</confirm>
		<div class="share" v-if='showShare'>
	      <img src="../../assets/image/sharelog.png" alt="" />
	      <div class="shareBtn" @click='iKonw'>知道了</div>
	    </div>
	    <div class="mask" v-if='showShare'>
	      
	    </div>
	</div>
</template>
<script>
/*发现详情*/
import { XHeader, Toast, Popup, Alert, Confirm } from 'vux';
import { setCookie, getCookie, appid,reloads,pushStateUrl,iosAdroidWx } from '../../util/commonUtils';
import wx from 'weixin-js-sdk' //微信jssdk
import download from '../../components/downloads';
import $ from 'jquery'
export default {
	name: "discoverDetail",
	// 数据
	data() {
		return {
			userId: '',
			userName: '',
			isBlack: false,
			isPraise: false, //是否已赞
			allData: '', //所有数据
			relatedData: '', //相关资讯数据
			likeSum: 0, //点赞数
			isShow: false, //是否显示（分享收藏）
			isCollect: false, //是否收藏
			ToastVisible: false, //Toast是否可见
			isComment: false, //是否显示写评论
			ToastVisible2: false, //Toast是否可见
			commentContent: '', //评论内容	
			isActivity: false, //广告位是否是活动
			commentTotal: 0, //评论总数
			commentData: [], //评论数据
			page: 1, //页数		
			confirmVisible: false, //确认框是否可见
			isLikeSum:false,//字体是否红色，点赞前后
			isComments:true,//是否有评论
			showShare:false,
			download:true 
		}
	},
	// 计算属性
	computed: {

	},
	// 创建（实例创建完成）
	created() {
		if(sessionStorage.getItem('reload')) {
			sessionStorage.removeItem('reload');
		} else {
			sessionStorage.setItem('reload', 1);
			pushStateUrl();
			reloads();
			return;
		}
		if(!sessionStorage.getItem('closeDown')){
	      this.download=true;
	    }else{
	      this.download=false;
	    }
		this.userId = getCookie('loginkey');
		this.userName = getCookie('userName');
		let id = this.$route.params.id;
		//发现 详情   
		this.$fetchPost('/ArticleWeb/getArticleDetail', {
			ART_ID: id,
			USER_ID: this.userId
		}).then(res => {
			this.allData = res;
			this.likeSum = res.LIKENUM;
			sessionStorage.removeItem('reload');
			if(res.IS_COLLECT == 1) {
				this.isCollect = true;
			} else {
				this.isCollect = false;
			}
			this.getConfig(res.SUBJECT, res.SUBJECT, res.SHARE_IMG);
		}, err => console.log(err));
		//相关资讯
		setTimeout(() => this.relatedArticle(id), 1000);
		this.getComment();
	},
	// el被创建，并挂载到实例上
	mounted() {
		this.$nextTick(function(){
			setTimeout(function(){
		        let content=document.getElementsByClassName('articsCon')[0];
		        let img=content.getElementsByTagName('img');
		        for(let i=0;i<img.length;i++){
					img[i].style.width='6.8rem';
				}
		    },1000)
		    window.onscroll=function(){
				console.log(11)
			}
		})
		
	},
	// 方法（实例中的方法）-----------
	methods: {
		closeDowns(val){
	      this.download=false;
	    },
		share(){
	      this.showShare=true;
	    },
	    iKonw(){
	      this.showShare=false;
	    },
	    goComment(){
	    },
	    goBack(){
	    	if(sessionStorage.getItem('city')){
	    		this.$router.push('/discover');
	    	}else{
	    		this.$router.push('/homepage');
	    	}
	    },
	    //去商店
	    goShop(id){
	    	this.$router.push('/shopDetail/'+id);
	    },
	    goAcive(url){
	    	location.href=url;
	    },
		//点赞
		changePraise(id) {
			this.isPraise = !this.isPraise;
			//发现 详情   
			if(this.isPraise) {
				this.$fetchPost('/ArticleWeb/articleLike', {
					ARTICLE_ID: id,
					TYPE: 1
				}).then(res => {
					this.isLikeSum = true;
					this.likeSum++;
				}, err => console.log(err));
			} else {
				this.$fetchPost('/ArticleWeb/articleLike', {
					ARTICLE_ID: id,
					TYPE: 2
				}).then(res => {			
					this.isLikeSum = false;
					this.likeSum--;
				}, err => console.log(err));
			}

		},
		//分享or收藏
		shareCollect() {
			this.isBlack = !this.isBlack;
			this.isShow = !this.isShow;
		},
		//改变背景颜色
		changeColor() {
			this.isBlack = false;
			this.isShow = false;
		},
		//切换收藏
		changeCollect() {
			if(!this.userId) {
				this.confirmVisible = true;
				return;
			}
			let id = this.$route.params.id;
			this.isCollect = !this.isCollect;
			this.isBlack = false;
			this.isShow = false;
			if(this.isCollect) {
				//添加资讯收藏
				this.$fetchPost('/UserFavoriteWeb/addArticleFavorite', {
					USER_ID: this.userId,
					COMP_ID: 0,
					CATEGORY: 2,
					ART_ID: id
				}).then(res => {
					if(res.IS_COLLECT == 1) {
						this.ToastVisible = true;
					}
				}, err => console.log(err));
			} else {
				//移除资讯收藏
				this.$fetchPost('/UserFavoriteWeb/addArticleFavorite', {
					USER_ID: this.userId,
					COMP_ID: 0,
					CATEGORY: 2,
					ART_ID: id
				}).then(res => {
				}, err => console.log(err));
			}

		},
		//分享
		shareFriend() {
			// this.isBlack = false;
			// this.isShow = false;
			// //分享
			// this.$fetchPost('', {USER_ID: this.userId}).then(res => {
			// 	console.dir(res);
			// }, err => console.log(err));
			this.showShare=true;
			this.isShow=false;
		},
		//相关资讯
		relatedArticle(id) {
			//最新资讯阅读
			this.$fetchPost('/ArticleWeb/newestArticle', {
				ARTICLE_ID: id
			}).then(res => {
				//console.dir(res);
				if(res.STATUS_CODE == 1) {
					this.relatedData = res.RESULT_DATA;
				}

			}, err => console.log(err));
		},
		//跳转相关资讯详情
		goRelatedArticle(id) {
			this.$router.replace('/discoverDetail/' + id);
	        //this.init();
	        location.reload();
		},
		//写评论
		writeComments() {
			this.isComment = true;
		},
		//取消评论
		cancelComment() {
			this.isComment = false;
		},
		//发送评论
		sendComment() {
			if(this.commentContent == '' || this.commentContent == null) {
				this.$vux.alert.show({
					title: '提示',
					content: '评论内容不能为空!'
				});
				return false;
			}
			let that=this;
			if(!this.userId){
				this.$vux.confirm.show({
		          title:'提示',
		          content:'请先登录',
		          onConfirm () {
		            that.$router.push('/login');
		          }
		        })
		        return;
			}
			let id = this.$route.params.id;
			//发布评论
			this.$fetchPost('CommentArticleWeb/addCommentArticle', {
				ARTICLE_ID: id,
				USER_NAME: this.userName,
				USER_ID: this.userId,
				COMMENT: this.commentContent
			}).then(res => {
				if(res.STATUS_CODE == 1) {
					this.isComment = false;
					this.ToastVisible2 = true;
					let obj={};
					obj.ARTICLE_ID=this.$route.params.id;
					obj.COMMENTARTICLE_ID=res.COMMENT_ID;
					obj.CREATEDATE=new Date().getTime();
					obj.HEADPHOTO=getCookie('userAvatar');
					obj.ILIKENUM=0;
					obj.LIKE_STATUS=0;
					obj.SCOMMENT=this.commentContent;
					obj.STATUS=1;
					obj.USER_ID=this.userId;
					if(this.userName.length==11){
						obj.USER_NAME=this.userName.slice(0,3)+'****'+this.userName.slice(7,11);
					}
					this.commentData.push(obj);
				}
			}, err => console.log(err));
		},
		//选中文本框
		textarea() {
			this.isComment = true;
		},
		getComment(){
			let id = this.$route.params.id;
			//资讯评论列表
			this.$fetchPost('CommentArticleWeb/commentArticleList', {
				ARTICLE_ID: id,
				PAGE_NO: this.page,
				PAGE_SIZE: 15,
				MAX_ID: 0,
				USER_ID: this.userId
			}).then(res => {
				//console.dir(res);
				if(res.STATUS_CODE == 1) {
					this.commentTotal = res.COMMENT_TOTAL;
					this.commentData = res.RESULT_DATA;
					this.page++;
				}
			}, err => console.log(err));
		},
		//评论点赞
		changePraise2(id) {
			for(let i=0;i<this.commentData.length;i++){
				if(this.commentData[i].COMMENTARTICLE_ID==id){
					if(this.commentData[i].LIKE_STATUS==0){//代表未点赞
						this.commentData[i].ILIKENUM++;
					}else{
						this.commentData[i].ILIKENUM--;
					}
					this.commentData[i].LIKE_STATUS=!this.commentData[i].LIKE_STATUS;
					this.getPraise(id);
				}
			}
			
		},
		getPraise(id){
			this.$fetchPost('CommentArticleWeb/likeCommentArticle', {
				COMMENTARTICLE_ID: id,
				USER_ID: this.userId
			}).then(res => {
				//console.dir(res);
				if(res.STATUS_CODE == 1) {
					
				}
			}, err => console.log(err));
		},
		//加载
		infinite() {
			let id = this.$route.params.id;
			if(this.commentData.length==0){
				this.$refs.myScroller.finishInfinite();
				return;
			}
			//资讯评论列表
			this.$fetchPost('CommentArticleWeb/commentArticleList', {
				ARTICLE_ID: id,
				PAGE_NO: this.page,
				PAGE_SIZE: 15,
				MAX_ID: 0,
				USER_ID: this.userId
			}).then(res => {
				//console.dir(res);
				if(res.STATUS_CODE == 1) {
					if(res.RESULT_DATA.length == 0) {
						this.$refs.myScroller.finishInfinite(2); //通知scroller数据全部加载完成
						this.isComment = false;
						return;
					}
					this.page++;
					this.commentTotal = res.COMMENT_TOTAL;
					this.commentData = res.RESULT_DATA;
					if(res.RESULT_DATA.length < 15) {
						this.$refs.myScroller.finishInfinite(2); //通知scroller数据全部加载完成		          		
						return;
					}
					//this.$refs.myScroller.finishInfinite();//通知scroller数据加载完成
				}
			}, err => console.log(err));
		},
		//去登陆
		goLogin() {
			this.$router.push('/login');
		},
		//获取微信的配置信息
		getConfig(title, desc, imgUrl) {
			let timestamp, nonceStr, signature;
			let urls=iosAdroidWx().urls;
            let appid=iosAdroidWx().appid;
			this.$fetchPost(urls, {
					'url': window.location.href
				}, {
					emulateJSON: true
				})
				.then(res => {
					var data = res;
					// timestamp = data.timestamp;
					// nonceStr = data.nonceStr;
					// signature = data.signature;
					timestamp=data.NOW_TIME;
			        nonceStr=data.NONCESTR;
			        signature=data.SKEY;
					// console.log(timestamp,nonceStr,signature,appId)
					wx.config({
						debug: false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: appid, // 必填，公众号的唯一标识
						timestamp: timestamp, // 必填，生成签名的时间戳
						nonceStr: nonceStr, // 必填，生成签名的随机串
						signature: signature, // 必填，签名，见附录1
						jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseWXPay', 'showOptionMenu']
					});
					let that = this;
					let linkUrl = location.href;
					wx.ready(function() {
						// 分享给朋友
						wx.onMenuShareAppMessage({
							title: title,
							desc: desc,
							link: linkUrl,
							imgUrl: imgUrl,
							trigger: function(res) {},
							success: function(res) {},
							cancel: function(res) {},
							fail: function(res) {
								alert(JSON.stringify(res));
							}
						});

						//分享朋友圈
						wx.onMenuShareTimeline({
							title: title,
							desc: desc,
							link: linkUrl,
							imgUrl: imgUrl,
							trigger: function(res) {},
							success: function(res) {},
							cancel: function(res) {},
							fail: function(res) {
								alert(JSON.stringify(res));
							}
						});
					})
				}, err => {

				});
		}
	},
	// 子组件
	components: {
		XHeader,
		Toast,
		Popup,
		Alert,
		Confirm,
		download
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
	.backBlack {
		background: #F6F6F9;
	}
	
	.myScroller {
		top: 0;
	}
	.myScrollerActive{
		padding-top: 0.88rem!important;
	}
	.mask{
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    left:0;
	    right: 0;
	    background: rgba(0,0,0,.8);
	    z-index: 9999;
	  }
	  .share{
	    width: 7.5rem;
	    height: 5.18rem;
	    position: absolute;
	    top: 7%;
	    right: 0%;
	    z-index: 10000;
	    img{
	      width: 4.48rem;
	      height: 4.88rem;
	      margin-left: 1.5rem;
	    }
	    .shareBtn{
	      width: 4rem;
	      height: 0.8rem;
	      font-size: 0.3rem;
	      line-height: 0.8rem;
	      color: #fff;
	      background: #ff0000;
	      border-radius: 0.3rem;
	      margin: 0.5rem auto;
	    }
	  }
	.discoverDetail {
		min-height:100%;
		.discoverDetailHeader {
			position: fixed;
			top: 0;
			width: 7.5rem;
			height: 0.88rem;
			display: flex;
			background: #fff;
			z-index: 55;
			.discoverDetailHeaderImg1 {
				height: 100%;
				display: flex;
				justify-content: center;
				position: absolute;
				left: 0.05rem;
				z-index: 6;
				bottom: 0;
				padding: 0 1rem 0 0.15rem;
				img {
					align-self: center;
					width: 0.37rem;
					height: 0.37rem;
				}
			}
			.discoverDetailHeaderTitle {
				height: 100%;
				position: absolute;
				left: 0.65rem;
				bottom: 0;
				display: flex;
				z-index: 5;
				justify-content: center;
				p {
					align-self: center;
					font-size: 0.36rem;
					color: #000;
				}
			}
			.discoverDetailHeaderImg2 {
				height: 100%;
				display: flex;
				justify-content: center;
				position: absolute;
				right: 0.3rem;
				bottom: 0;
				img {
					align-self: center;
					width: 0.38rem;
					height: 0.08rem;
				}
			}
			.discoverShareCollect {
				width: 2rem;
				height: 1.5rem;
				position: fixed;
				right: 0rem;
				top: 0.88rem;
				background: #fff;
				z-index: 9999;
				.discoverShare {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;
					img {
						align-self: center;
						width: 0.4rem;
						height: 0.4rem;
						margin-right: 0.2rem;
					}
					p {
						align-self: center;
						font-size: 0.28rem;						
					}
				}
				.discoverCollect {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;
					img {
						align-self: center;
						width: 0.4rem;
						height: 0.36rem;
						margin-right: 0.2rem;
					}
					p {
						align-self: center;
						font-size: 0.28rem;						
					}
				}
			}
		}
		.discoverDetailBlank {
			height: 0.88rem;
		}
		.discoverDetailTitle {
			width: 90%;
			margin: 0 auto;
			p {
				font-size: 0.5rem;
				color: #2b2b2b;
				font-weight: bolder;
				text-align: left;
				margin-top: 0.3rem;
				margin-left: ;
			}
		}
		.discoverDetailPlatform {
			width: 90%;
			margin: 0 auto;
			display: flex;
			margin-top: 0.3rem;
			position: relative;
			p {
				font-size: 0.26rem;
				color: #8f8f8f;
			}
			p:nth-child(2) {
				margin-left: 0.5rem;
			}
			p:last-child {
				position: absolute;
				right: 0;
			}
		}
		.discoverDetailContents {
			margin-top: -0.3rem;
			.discoverDetailContent {
				width: 6.8rem;
				margin: 0 auto;
				margin-top: 0.62rem;
				margin-bottom: 0.56rem;
				p {
					font-size: 0.3rem;
					color: #000000;
					text-align: left;
					img{
						width:100% !important;

					}					
				}							
			}
			.discoverDetailContentsSum {
				display: flex;
				.discoverDetailContentsRead {
					display: flex;
					height: 0.44rem;
					margin-left: 0.375rem;
					.discoverDetailContentsReadImg {
						display: flex;
						img {
							align-self: center;
							width: 0.44rem;
							height: 0.44rem;
						}
					}
					.discoverDetailContentsReadSum {
						display: flex;
						margin-left: 0.1rem;
						p {
							align-self: center;
							font-size: 0.26rem;
							color: #666;
						}
					}
				}
				.discoverDetailcontentsLike {
					height: 0.44rem;
					display: flex;
					margin-left: 1.38rem;
					margin-bottom: 0.66rem;
					.discoverDetailcontentsLikeImg {
						display: flex;
						img {
							align-self: center;
							width: 0.44rem;
							height: 0.44rem;
						}
					}
					.discoverDetailcontentsLikeSum {
						display: flex;
						margin-left: 0.1rem;
						p {
							align-self: center;
							font-size: 0.26rem;
							color: #000000;
						}
						.likeSumRed{
							color:#ec2121;
						}
					}
				}
			}
		}
		.relatedArticle {
			.relatedArticleBlank {
				height: 0.15rem;
				background: #f0f0f0;
			}
			.relatedArticleTitle {
				width: 95%;
				height: 0.85rem;
				margin: 0 auto;
				background: #fff;
				border-top-right-radius: 0.12rem;
				border-top-left-radius: 0.12rem;
				.borderBFu(#e1e1e1);
				display: flex;
				p {
					align-self: center;
					font-size: 0.36rem;
					color: #ec2121;
					margin-left: 0.2rem;
				}
			}
			.relatedArticleLists {
				width: 95%;
				margin: 0 auto;
				background: #fff;
				.borderBFu(#e1e1e1);
				.relatedArticleList {
					display: flex;
					.relatedArticleListL {
						margin-left: 0.2rem;
						margin-top: 0.2rem;
						img {
							width: 2.5rem;
							height: 1.68rem;
						}
					}
					.relatedArticleListR {
						width: 4.625rem;
						height: 1.68rem;
						position: relative;
						background: #fff;
						margin-top: 0.2rem;
						.relatedArticleListTitle {
							width: 4.2rem;
							p {
								font-size: 0.3rem;
								color: #686868;
								text-align: left;
								margin-left: 0.2rem;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
						.relatedArticleListDate {
							position: absolute;
							bottom: 0;
							p {
								font-size: 0.3rem;
								color: #b0b0b0;
								text-align: left;
								margin-left: 0.2rem;
							}
						}
					}
				}
			}
			.relatedArticleLists:last-child{
				.borderBFu(#fff);
			}
		}
		.relatedAd {
			width: 7.1rem;
			height: 2.1rem;
			margin: 0 auto;
			display: flex;
			border: 1px solid #dddddd;
			margin-bottom: 0.43rem;
			border-radius: 0.15rem;
			background:#fff;
			.relatedAdImg {
				display: flex;
				img {
					align-self: center;
					width: 1.42rem;
					height: 1.32rem;
					margin-left: 0.37rem;
				}
				p {
					align-self: center;
					height: 1.52rem;
					border-right: 1px solid #dddddd;
					margin-left: 0.3rem;
					margin-right: 0.3rem;
				}
			}
			.relatedAdContent {
				height: 1.32rem;
				margin-top: 0.29rem;
				display: flex;
				flex-flow: column;
				.relatedAdName {
					width: 4.4rem;
					height: 90%;
					p {
						font-size: 0.32rem;
						color: #222222;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.relatedAdPrices {
					display: flex;
					align-items:center;
					.relatedAdOprice {
						display: flex;
						align-items:center;
						p {
							align-self: center;
							font-size: 0.26rem;
							color: #848689;
						}
					}
					.relatedAdprice {
						display: flex;
						margin-left: 0.3rem;
						p {
							align-self: center;
							font-size: 0.26rem;
							color: #EC2112;
							span {
								font-size: 0.32rem;
							}
						}
					}
				}
			}
		}
		.relatedAd2 {
			width: 7.1rem;
			height: 3rem;
			margin: 0 auto;
			//display:flex;
			border: 1px solid #dddddd;
			margin-bottom: 0.43rem;
			border-radius: 0.15rem;
			background: #fff;
			.relatedAdImage2 {
				width: 6.9rem;
				height: 2rem;
				margin: 0 auto;
				margin-top: 0.1rem;
				img {
					width: 6.9rem;
					height: 2rem;
				}
			}
			.relatedAdDesc2 {
				width: 6.9rem;
				height: 1rem;
				display: flex;
				margin: 0 auto;
				p {
					align-self: center;
					font-size: 0.32rem;
					color: #000000;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		.relatedComments {
			display: flex;
			width:95%;
			margin: 0 auto;
			position: relative;
			.borderBFu(#dddddd);
			.relatedCommentsImg {
				img {
					display: block;
					border-radius: 50%;
					width: 0.68rem;
					height: 0.68rem;
					margin-top: 0.24rem;
					margin-left: 0.12rem;
				}
			}
			.relatedCommentsCons {
				margin-left: 0.36rem;
				p:nth-child(1) {
					font-size: 0.24rem;
					color: #3762c8;
					text-align: left;
					margin-top: 0.24rem;
				}
				p:nth-child(2) {
					font-size: 0.22rem;
					color: #7b7a7b;
					text-align: left;
					margin-top: 0.1rem;
				}
				p:nth-child(3) {
					font-size: 0.26rem;
					color: #313031;
					text-align: left;
					margin-top: 0.18rem;
					margin-bottom: 0.3rem;
				}
			}
			.relatedCommentsLike {
				position: absolute;
				top: 0.3rem;
				right: 0.3rem;
				display: flex;
				width: 0.8rem;
                justify-content: space-between;
                align-items:center;
				img {
					align-self: center;
					width: 0.33rem;
					height: 0.33rem;
				}
				p {
					align-self: center;
					font-size: 0.28rem;
					margin-left: 0.28rem;
				}
				.activeR{
					color: #ec2121;
				}
			}
		}
		.noComment{
	      padding: 0.2rem 0;
	      img{
	        width: 1.03rem;
	        height: 1.33rem;
	        display: block;
	        margin: 0 auto;
	      }
	      p{
	        font-size: 0.25rem;
	        color: #666;
	        padding: 0.15rem 0;
	      }
	    }
		.discoverFootBlank {
			height: 0.98rem;
		}
		.writeComments {
			width: 7.5rem;
			height: 0.98rem;
			position: fixed;
			bottom: 0;
			background: #fff;
			z-index: 99;
			display: flex;
			p{
				font-size:0.32rem;
				color:gray;
			}
			.writeComment {
				width: 4rem;
				height: 0.7rem;
				display: flex;
				align-self: center;
				position: relative;
				img {
					position: absolute;
					top: 0.14rem;
					left: 0.4rem;
					width: 0.32rem;
					height: 0.32rem;
				}
				input {
					width: 4rem;
					height: 0.7rem;
					border: none;
					border: 1px solid #D1D1D1;
					background: #fff;
					border-radius: 0.4rem;
					text-indent: 0.8rem;
					margin-left: 0.2rem;
					font-size: 0.3rem;
				}
				input::-webkit-input-placeholder {
					text-indent: 0.8rem;
				}
				input:focus {
					text-indent: 0.8rem;
				}
			}
			.commentQuantity {
				height: 100%;
				display: flex;
				position: relative;
				width: 0.7rem;
				margin-left: 0.7rem;
				justify-content:center;
				img {
					align-self: center;
					width: 0.4rem;
					height: 0.36rem;
				}
				p {
					position: absolute;
					right: -0.05rem;
					top: 0.1rem;
					border-radius: 50%;
					font-size: 0.22rem;
					color: #fff;
					display: flex;
					align-items:center;
					justify-content:center;
					background: #ff0000;
				}
			}
			.commentCollect {
				height: 100%;
				display: flex;
				width: 0.6rem;
				margin-left: 0.3rem;
				justify-content:center;
				align-items:center;
				img {
					align-self: center;
					width: 0.41rem;
					height: 0.41rem;
					margin-top: -0.05rem;
				}
			}
			.commentShare {
				height: 100%;
				display: flex;
				width: 0.6rem;
				margin-left: 0.3rem;
				justify-content:center;
				align-items:center;
				img {
					align-self: center;
					width: 0.33rem;
					height: 0.34rem;
				}
			}
		}
		.discoverPopup {
			.allComment{
				padding: 0.1rem 0 0.3rem;
			}
			background: #dddddd;
			.popupText {
				display: flex;
				align-items:center;
				p:nth-child(1) {
					position: absolute;
					left: 0.38rem;
					top: 0.12rem;
					color: #000000;
					font-size: 0.3rem;
					padding: 0.1rem;
				}
				p:nth-child(2) {
					position: absolute;
					left: 3.3rem;
					font-size: 0.35rem;
					top: 0.12rem;
					color: #000000;
				}
				p:nth-child(3) {
					position: absolute;
					right: 0.38rem;
					color: #000000;
					top: 0.12rem;
					font-size: 0.3rem;
					padding: 0.1rem;
				}
			}
			textarea {
				width: 90%;
				height: 75%;
				border: 0;
				margin-top: 0.6rem;
				outline: medium;
				resize: none;
				height: 2rem;
				padding: 0.1rem;
				font-size:0.34rem;
			}
		}
	}
</style>